<template>
  <div>
    <van-nav-bar class="nav_bar" title="银行卡信息" left-text="取消" left-arrow right-text="保存" @click-left="$router.go(-1)"
      @click-right="validCard" />
    <van-cell-group style="margin-top: 50px;">
      <van-field v-model="name" label="持卡人" placeholder="请输入持卡人姓名" icon="edit" input-align="right" :error="!!$vuelidation.error('name')" />
      <van-field v-model="idCard" label="身份证号码" placeholder="请输入持卡人身份证号" icon="edit" input-align="right" :error="!!$vuelidation.error('idCard')" />
      <van-field v-model="cardNo" label="卡号" placeholder="请输入银行卡卡号" icon="edit" input-align="right" @blur="checkBank"
        :error="!!$vuelidation.error('cardNo')" />
      <van-cell v-if="bank" title="所属银行" :value="bank" isLink />
      <van-field v-model="mobile" label="预留电话" placeholder="请输入银行卡预留电话" icon="edit" input-align="right" :error="!!$vuelidation.error('mobile')" />
    </van-cell-group>
  	<van-button v-if="card" size="large" plain type="danger" class="del_btn" @click="delCard">删除银行卡</van-button>
  </div>
</template>
<script>
import {
  NavBar
} from "vant";

import bankList from './bank.json';
import {
  ALI_API
} from '@/api/global';
import {SAVE_BANKCARD} from '@/api/user';

export default {
  data() {
    const user = this.getUser();
    const card = this.$util.getSessionStorage('card');
    return {
      name: card ? card.username : (user.realname || ''),
      cardNo: card ? card.cardNo : '',
      cardType: card ? card.cardType : '',
      bank: card ? card.bbName : '',
      bankCode: card ? card.bankId : '',
      mobile: card ? card.cardPhone : (user.mobile || ''),
      idCard: card ? card.cardId : (user.idCard || ''),
      card
    }
  },
  vuelidation: {
    data: {
      name: {
        required: true,
        msg() {
          return "请填写持卡人姓名"
        }
      },
      mobile: {
        required: true,
        mobile: true,
        msg() {
          return "请填写银行预留手机号码"
        }
      },
      bank: {
          required: true,
          msg() {
              return "请填写正确的银行卡号"
          }
      },
      idCard: {
        required: true,
        idcard: true,
        msg() {
          return "请填写身份证号码"
        }
      },
      cardNo: {
        required: true,
        bankcard: true,
        msg() {
          return "请填写正确的银行卡号"
        }
      },
    }
  },

  methods: {
    checkBank() {
      if (!this.cardNo) {
        return;
      }

      this.$reqPost(ALI_API + this.cardNo).then(res => {
        if (res.data.validated) {
          this.bank = bankList[res.data.bank];
          this.bankCode = res.data.bank;
          this.cardType = (res.data.cardType == 'DC') ? 2 : 1;
        } else {
          this.$dialog.alert({
            message: '验证银行卡号错误，请核对后重试'
          });
        }
      }).catch(error => {
        this.$dialog.alert({
          message: '验证银行卡号错误，请核对后重试'
        });
      });
    },

    validCard() {
      if (!this.mixValid()) {
        return;
      }

      let card = {
          cdId: this.card ? this.card.cdId : null,
          cardNo: this.cardNo,
          mid: this.user.id,
          username: this.name,
          cardId: this.idCard,
          cardPhone: this.mobile,
          bankId: this.bankCode,
          cardType: this.cardType,
          bbName: this.bank
      }

      this.$reqPost(SAVE_BANKCARD, card).then(res => {
          this.$toast('保存成功');
          this.$util.removeStorage('card', false);
          let vm = this;
          setTimeout(() => {
              vm.$router.go(-1);
          }, 1000);
      });
    },

    delCard() {
      this.$dialog.confirm({message: '是否确认删除银行卡？'}).then(() => {
        let card = {
            cdId: this.card ? this.card.cdId : null,
            isDelete: 1
        }

        this.$reqPost(SAVE_BANKCARD, card).then(res => {
            this.$toast('删除成功');
            this.$util.removeStorage('card', false);
            let vm = this;
            setTimeout(() => {
                vm.$router.go(-1);
            }, 1000);
        });
      }).catch(() => {});
    }
  },

  components: {
    [NavBar.name]: NavBar,
  }
}
</script>
<style lang="scss" scoped>
.nav_bar {
  background-color: $green;
  color: white;
  position: fixed;
  width: 100%;
  margin-bottom: 50px;
}
.del_btn {
  margin-top: 10px;
  background-color: white;
}

</style>
